<template>
  <div class="layout">
	  <div class="box" :style="[boxStyle]">
		  <div class="menu-list" >
			<div class="menu-item"
			  @click="modelNavigateTo(item)"
			  v-for="(item, index) in res"
			  :key="index"
			>
			  <!-- <div style="text-align: center;justify-content: center;align-items: center;">
				  
			  </div> -->
			  <image :src="item.img" style="height:84rpx;width:84rpx" />
			  <div class="menu-title">{{ item.title }}</div>
			</div>
		  </div>
	  </div>
  </div>
</template>
<script>
import { modelNavigateTo } from "./tpl";
export default {
  title: "menu4x",
  props: {
	  res: {
	  },
	  listStyle: {
	  	type: Object,
	  	default: () => {}
	  },
  },
  computed: {
  	boxStyle() {
  		let style={};
  		for(var key in this.listStyle){
  			style[key] = this.listStyle[key];
  		}
		
  		return style;
  	},
	
  },
  data() {
    return {
      modelNavigateTo,
    };
  },
};
</script>
<style lang="scss" scoped>

.layout{
	width:750rpx;
	margin-top:20rpx; 
}
.box{
	width:702rpx;
	margin-left:24rpx;
	//background-color: #fff;
}
.menu-list {
  display: flex;
  flex-direction: row;
  align-items: center;
 
  flex-wrap: wrap;
  
}
.menu-item {
	margin-top:10rpx;
	margin-bottom:10rpx;
    text-align: center;
    width: 25%;
}
.menu-img {
  display: flex;
  margin: 0 auto;
  width: 64rpx;
  height: 64rpx;
}
.menu-title {
	margin-top:5rpx;
  font-size: 24rpx;
  color:#3D3D3D
}
</style>